<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="12">
        <event-to-do-card title="待办事项"/>
      </el-col>
      <el-col :span="12">
        <message-card title="未读消息"/>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :span="7">
        <el-card>
          <div slot="header">
            <span>分类浏览饼状图</span>
          </div>
          <ve-pie :data="chartData1" :settings="chartSettings1"/>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card>
          <div slot="header">
            <span>用户访问折线图</span>
          </div>
          <ve-line :data="chartData2" :settings="chartSettings2"/>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>用户下单漏斗图</span>
          </div>
          <ve-funnel :data="chartData3"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EventToDoCard from '@pages/home/part/home/EventToDoCard'
import MessageCard from '@pages/home/part/home/MessageCard'
export default {
  name: 'PageHome',
  components: { MessageCard, EventToDoCard },
  data () {
    return {
      chartSettings1: {
        radius: 100
      },
      chartData1: {
        columns: ['time', 'user'],
        rows: [
          { 'time': '1/1', 'user': 1393 },
          { 'time': '1/2', 'user': 3530 },
          { 'time': '1/3', 'user': 2923 },
          { 'time': '1/4', 'user': 1723 },
          { 'time': '1/5', 'user': 3792 },
          { 'time': '1/6', 'user': 4593 }
        ]
      },
      chartSettings2: {
        axisSite: { right: ['orderPercent'] },
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['number', '比率']
      },
      chartData2: {
        columns: ['time', 'goIn', 'orderUser', 'orderPercent'],
        rows: [
          { 'time': '1/1', 'goIn': 1393, 'orderUser': 1093, 'orderPercent': 0.32 },
          { 'time': '1/2', 'goIn': 3530, 'orderUser': 3230, 'orderPercent': 0.26 },
          { 'time': '1/3', 'goIn': 2923, 'orderUser': 2623, 'orderPercent': 0.76 },
          { 'time': '1/4', 'goIn': 1723, 'orderUser': 1423, 'orderPercent': 0.49 },
          { 'time': '1/5', 'goIn': 3792, 'orderUser': 3492, 'orderPercent': 0.323 },
          { 'time': '1/6', 'goIn': 4593, 'orderUser': 4293, 'orderPercent': 0.78 }
        ]
      },
      chartData3: {
        columns: ['state', 'number'],
        rows: [
          { 'state': '展示', 'number': 900 },
          { 'state': '访问', 'number': 600 },
          { 'state': '点击', 'number': 300 },
          { 'state': '订单', 'number': 100 }
        ]
      }
    }
  }
}
</script>

<style>
</style>
